<template>
  <div class="add-course">
    <!-- 导航 -->
    <div class="header-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        router
        :ellipsis="false"
      >
        <el-menu-item
          index="/aiTeaching/courseSystem/teachingManage/classManage"
        >
          <span>班级管理</span>
        </el-menu-item>
        <!-- <el-menu-item
          index="/aiTeaching/courseSystem/teachingManage/virtualMachineManage"
        >
          <span>虚机管理</span>
        </el-menu-item> -->
        <el-menu-item
          index="/aiTeaching/courseSystem/teachingManage/assistantManage"
          :disabled="!hasClasses"
        >
          <span>助教管理</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 三级路由页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";
export default {
  data() {
    return {
      activeIndex: "",
      value: "",
      options: [
        { id: 1, name: "图像工程1" },
        { id: 2, name: "图像工程2" },
        { id: 3, name: "图像工程3" },
      ],
      courseId: "",
      classData: [], // 班级数据
    };
  },
  computed: {
    // 判断是否有班级
    hasClasses() {
      return this.classData && this.classData.length > 0;
    },
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
  },
  mounted() {
    this.updateActiveIndex();
    this.getClassList();
    eventBus.on("updateClassInfo", this.getClassList);
  },
  beforeUnmount() {
    eventBus.off("updateClassInfo", this.getClassList);
  },
  watch: {
    $route() {
      this.updateActiveIndex();
    },
  },
  methods: {
    updateActiveIndex() {
      this.activeIndex = this.$route.meta.activeMenu_child || this.$route.path;
    },
    goBack() {
      this.$router.go(-1);
      // this.$router.push('/aiTeaching/courseBuildList')
    },
    // 获取班级列表
    getClassList() {
      // 每次获取班级列表时都重新从localStorage获取最新的courseId
      const currentCourseId = JSON.parse(localStorage.getItem("courseId"));
      this.courseId = currentCourseId;

      this.$axios
        .get(
          `/tes/course/${this.courseId}/class/page?pageNum=1&pageSize=999&classStatus=&grade=`
        )
        .then((res) => {
          if (res.code == 200) {
            this.classData = res.data.content || [];
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-course {
  .header-nav {
    padding: 15px 70px 0;
    background-color: #fff;
    box-sizing: border-box;
    .el-menu {
      display: flex;
      align-items: center;
      border-bottom: none;
      .el-menu-item {
        width: 80px;
        height: 30px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #b2c8ff;
        margin-right: 10px;
        color: #457aff;
        &:hover {
          background-color: #fff;
          color: #457aff;
        }
        &.is-active {
          background: #457aff;
          border-bottom: none;
          span {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>